<template>
	<view class="dv">
		<view class="tab">
			<view class="tabs" v-for="(item,index) in list" :key="index" @click="tabChange(index)">
				<text :class="{active:Index == index}">{{item.name}}</text>
			</view>
		</view>


		<view class="box">
			<text class="box1" v-for="(item,index) in lists" :key="index" @click.stop="clickLabel(item)">
				{{item.name}}
			</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tabList:['Java','前端','云计算','运维','测试','UI设计','人工智能','大数据'],// 侧边栏数据
				Index: 0,
				list: [],
				lists: []
			}
		},
		methods: {
			tabChange(i) {
				console.log(i);
				this.Index = i
				this.getInfo()
			},
			getInfo() {
				uni.request({
					url: 'http://m.mengxuegu.com/api/article/api/category/label/list',
					method: "get"
				}).then(res => {
					// console.log(res[1].data.data);
					this.list = res[1].data.data;
					// console.log(this.list[this.Index].labelList);
					this.lists = this.list[this.Index].labelList
					console.log(this.lists);
				})
			},
			// 点击每一项跳转页面
			clickLabel(item) {
				console.log(item);
				// 注意：labelId放到第1个位置，后面解析时要用，顺序一定不能乱
				// activeIndex 选中分类下标，方便父组件重新选择分类时，默认选中当前分类
				const params = {
					labelId: item.id,
					name: item.name,
					activeIndex: this.Index
				}
				uni.navigateTo({
					url: `/pages/search/search?params=${ JSON.stringify(params) }`
				})
			}
		},
		created() {
			this.getInfo()
		},
		onNavigationBarButtonTap(e) {
			// 搜索按钮
			console.log(e);
			if (e.index == 0) {
				// 在 /common/mixin/mixin.js 中定义了
				// this.navTo('/pages/search/search')
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		},
	}
</script>

<style lang="scss">
	.dv {
		display: flex;
		width: 100%;
	}

	.tab {
		// height: 85.5vh;
		background-color: #f8f9fb;
		width: 200rpx;

		.tabs {
			height: 125rpx;
			line-height: 125rpx;
			width: 200rpx;
			text-align: center;
		}


	}


	.box1 {
		// padding: 10rpx 0;
		height: 40rpx;

		width: 25%;
		text-align: center;
		margin-left: 20rpx;
		padding: 0 5rpx;
		float: left;
		border: 1px solid #000;
		margin-top: 10rpx;
		border-radius: 40rpx;
		line-height: 40rpx;
		font-size: 14rpx;
	}

	.active {
		color: #345dc2;
		width: 200rpx;
		display: block;
		border-left: 4px solid #345dc2;
	}
</style>
